<template>
  <div
    class="page"
    :class="{ mobile: isMobile }"
  >
    <div v-if="!isMobile" class="detail">
      <div class="content">
        <div class="guestbook-banner">
          <img style="width: 620px; height: 350px;" src="https://img.luoyuanxiangvip.com/links/links.jpg?imageView2/1/w/620/h/350/format/webp/interlace/1/q/75" alt="">
          <span v-text="$i18n.text.links">简单一些，再简单一些这就是生活</span>
        </div>
      </div>
    </div>
    <div class="sitemap">
      <div class="module categories">
        <h3
          class="title"
          v-text="$i18n.text.tips.name"
        />
        <ul class="categories-list">
          <li class="item">
            <p class="item-content">
              <strong class="name">
                推荐方式：直接在下方评论区留言
              </strong>
            </p>
          </li>
          <li class="item">
            <p class="item-content">
              <strong class="name">
                发送 Email:
                <a
                  href="mailto:1141306760@qq.com"
                  target="_blank"
                  class="mail"
                  rel="external nofollow noopenter"
                >
                  <i class="iconfont icon-mail" />
                </a>
              </strong>
            </p>
          </li>
          <li class="item">
            <p class="item-content">
              <strong class="name">
                注意：先友后链，先友后链，先友后链
              </strong>
            </p>
          </li>
          <li class="item">
            <p class="item-content">
              <strong class="name">
                链接：{{ appOption.siteWebUrl }}
              </strong>
            </p>
          </li>
          <li class="item">
            <p class="item-content">
              <strong class="name">
                LOGO：{{ appOption.siteWebUrl }}/favicon.ico
              </strong>
            </p>
          </li>
          <li class="item">
            <p class="item-content">
              <strong class="name">
                简介：{{ isEnLang ? appOption.slugTitle : appOption.siteTitle }}
              </strong>
            </p>
          </li>
        </ul>
      </div>
      <div class="module tags">
        <h3
          class="title"
          v-text="$i18n.text.link.name"
        >
          links
        </h3>
        <p
          v-if="!linksList.length"
          v-text="$i18n.text.link.empty"
        >
          暂无友链
        </p>
        <ul
          v-else
          class="tag-list"
        >
          <li
            v-for="(link, index) in linksList"
            :key="index"
            class="item"
          >
            <img
              style="border-radius:50%;width: 20px; height: 20px;"
              :src="link.favicon"
              alt=""
            >
            <a
              :href="link.url"
              target="_blank"
              :title="link.description"
            >{{ link.name | nameSb }}</a>
          </li>
        </ul>
      </div>
    </div>
    <div v-if="isComment" class="comment">
      <comment-box
        :post-id="-1"
        :likes="siteLikes"
      />
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'Links',
  head() {
    return {
      title: `${this.isEnLang ? '' : this.$i18n.nav.link + ' | '}Links`
    }
  },
  filters: {
    nameSb(name) {
      if (name.length >= 6) {
        return name.substring(0, 5) + '...'
      }
      return name
    }
  },
  computed: {
    ...mapState({
      linksList: state => state.links.data
    }),
    isEnLang() {
      return this.$store.getters['global/isEnLang']
    },
    siteLikes() {
      return this.$store.state.global.appOption.data.likes
    },
    isComment() {
      return this.$store.state.global.appOption.data.linksComment
    },
    isMobile() {
      return this.$store.state.global.isMobile
    },
    appOption() {
      return this.$store.state.global.appOption.data
    }
  },
  fetch({ store }) {
    return Promise.all([
      store.dispatch('global/fetchAppOption'),
      store.dispatch('links/fetchList', { limit: 500 }),
      store.dispatch('comment/fetchList', { post_id: -1 }),
      store.dispatch('global/fetchAdminInfo')
    ])
  }
}
</script>
<style lang="scss" scoped>
  .page {
    $border-guide: 1px solid;
    $margin-guide: 1.2em;
    &.mobile {

      > .detail {

        > .content {
          height: 11em;

          > .guestbook-banner {
            height: 11em;
          }
        }
      }
    }

    .detail {
      margin-bottom: 1em;
      background-color: $module-bg;

      .content {
        width: 100%;
        height: 17em;
        overflow: hidden;

        .guestbook-banner {
          position: relative;
          overflow: hidden;
          width: 100%;
          height: 17em;
          border: 0;

          img {
            margin-top: -5em;
            @include css3-prefix(transition, all 1s);

            &:hover {
              margin-top: -6em;
              @include css3-prefix(transform, rotate(2deg) scale(1.1));
              @include css3-prefix(transition, all 1s);
            }
          }

          span {
            position: absolute;
            right: 2em;
            bottom: 2em;
            display: block;
            font-weight: 700;
            opacity: .5;
            cursor: progress;
            padding: 0 .618em;
            padding-left: 3rem;
            height: 2em;
            line-height: 2em;
            color: $body-bg;
            background: linear-gradient(to left, $module-bg, $module-hover-bg-opacity-3, transparent);
          }
        }
      }
    }
    .module {
      font-size: 1em;
      .title {
        font-weight: bold;
        text-transform: capitalize;
        margin: 0em 0 $margin-guide * 0.9;
      }
    }
    .sitemap {
      padding: 2em 3em;
      background-color: $module-bg;
      overflow: hidden;
      text-transform: capitalize;
      a {
        border-bottom: $border-guide;

        &.toggle-link {
          border: none;
        }
      }

      .module {
        font-size: 1em;

        .title {
          font-weight: bold;
          text-transform: capitalize;
          margin: 0em 0 $margin-guide * 0.9;
        }
      }

      .tags,
      .pages {
        .tag-list,
        .page-list {
          overflow: hidden;

          .item {
            float: left;
            display: block;
            margin-right: $margin-guide;
            margin-bottom: $margin-guide;
          }
        }
      }

      .categories {
        .categories-list {
          .item {
            .name {
              text-transform: capitalize;
            }
          }
        }
      }
    }
  }
</style>
